<template>
    <div>
       <!-- 卡片框 -->
      <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>球馆管理</el-breadcrumb-item>
      </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="searchBox">
             <!-- 添加按钮 -->
            <div class="addUserBox" >
                <el-button  type="success" icon="el-icon-circle-plus-outline" @click="isShowAddStadium = true">添加球馆</el-button>
            </div>
            <el-input
            placeholder="请输入关键词"
            v-model="query"
            clearable style="width:500px;margin-right:5px">
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="search">查找</el-button>
        </div>
        <!-- 添加球馆对话框 -->
            <el-dialog width="600px" title="添加球馆" :visible.sync="isShowAddStadium">
             <el-form ref="addStadiumFormRef"  label-width="80px" :model="addStadiumForm" :rules="rules">
                <el-form-item label="球馆名称" prop="sName">
                    <el-input v-model="addStadiumForm.sName"></el-input>
                </el-form-item>
                 <el-form-item label="球馆地址" prop="sAddress">
                    <el-input v-model="addStadiumForm.sAddress"></el-input>
                </el-form-item>
                 <el-form-item label="球馆电话" prop="sPhone">
                    <el-input v-model="addStadiumForm.sPhone"></el-input>
                </el-form-item>
                 <el-form-item label="球馆简介">
                     <el-input v-model="addStadiumForm.intro"></el-input>
                </el-form-item>
                 <div class="avatarBox">
                    <div class="title"><span>添加门店图片</span></div>
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8888/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                 </div>
             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="addStadium">点击添加</el-button>
                    <el-button  @click="closeAddbox">取消</el-button>
                </el-form-item>
                
             </el-form>
          </el-dialog>
        <!-- 编辑球馆对话框 -->
            <el-dialog width="600px" title="编辑球馆信息" :visible.sync="isShowEditStadium">
             <el-form ref="editStadiumFormRef"  label-width="80px" :model="editStadiumForm" :rules="rules">
                <el-form-item label="球馆名称" prop="sName">
                    <el-input v-model="editStadiumForm.sName"></el-input>
                </el-form-item>
                
                 <el-form-item label="球馆地址" prop="sPhone">
                    <el-input v-model="editStadiumForm.sPhone"></el-input>
                </el-form-item>
                 <el-form-item label="球馆电话" prop="sAddress">
                    <el-input v-model="editStadiumForm.sAddress"></el-input>
                </el-form-item>
                <el-form-item label="球馆简介">
                     <el-input v-model="editStadiumForm.intro"></el-input>
                </el-form-item>
                 <div class="avatarBox">
                    <div class="title"><span>添加门店图片</span></div>
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8888/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="editStadiumForm.picUrl!=''" :src="editStadiumForm.picUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                 </div>
             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="saveEditStadium">保存修改</el-button>
                    <el-button  @click="closeEditbox">取消</el-button>
                </el-form-item>
                
             </el-form>
        </el-dialog>
        <!-- 表格区域 -->
           <el-table
            :data="stadiumList"
            border stripe fit
            empty-text='null'
            class="userTable"
            style="width: 100%;margin-top:12px">
            <el-table-column type="index" label="#" width="30"></el-table-column>
            <el-table-column prop="sid" label="球馆编号" sortable width="105"></el-table-column>
            <el-table-column  label="门面图片" width="180">
                 <template scope="scope" >
                    <img class="stadiumPicture" :src="scope.row.picUrl" alt="">     
            
                 </template>
            </el-table-column>
            <el-table-column prop="sname" label="球馆名称" width="180">
            </el-table-column>
            <el-table-column prop="address"  label="地址" width="300">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="180">
            </el-table-column>
            <el-table-column prop="intro" label="简介" width="180">
                <template scope="scope">
                    <div v-if="scope.row.intro==''">暂无</div>
                    <div v-else>{{scope.row.intro}}</div>
                </template>
            </el-table-column>
             <el-table-column  label="操作" width="">
                 <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" size="medium" @click="editStadium(scope.row)">编辑</el-button>
                         <el-button type="danger"  icon="el-icon-delete" size="medium" @click="removeStadium(scope.row.sid)">删除</el-button>   
                 </template>
            </el-table-column>
            

           </el-table>


           <Pagination :pageSize="pagination.pageSize" :total="pagination.total" :pageNo="pagination.currentPage" :continues=5 @getPageNo="goToPageNo" />
      </el-card>
    </div>
</template>

<script>
import Api from '../../api/index';
import {mapState} from 'vuex';

export default {

    data() {
        return {
            // 球馆信息列表
            stadiumList:[],
            // 分页器参数
            pagination:{
                currentPage:'',
                pageSize:'',
                total:''
            },
            // 将要添加球馆表单
            addStadiumForm:{
                sName:'',
                sPhone:'',
                sAddress:'',
                intro:'',
                picUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hjunkel.com%2Fimages%2Fnopic2.gif&refer=http%3A%2F%2Fwww.hjunkel.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654757286&t=8300d837c07f39c2a89e6d61e44a7b7d'
       
            },
            // 编辑球馆信息的表单
            editStadiumForm:{
                sName:'',
                sPhone:'',
                sAddress:'',
                sid:'',
                intro:'',
                picUrl:''
            },
            // 关键字
            query:'',
            // 控制添加对话框是否显示
            isShowAddStadium:false,
            // 控制编辑对话框是否显示
            isShowEditStadium:false,
            imgUrl:'',
            // 验证表单规则配置
             rules:{
                sName:[{ required: true, message: '球馆名称不能为空', trigger: 'blur' }],
                sPhone:[{ required: true, message: '球馆联系电话不能为空', trigger: 'blur' }],
                sAddress:[{required:true,message:'地址不能为空',trigger:'blur'}]         
            },
        }
    },
    methods: {
        // 获取所有球馆信息
        async getStadiumData(){
                 this.$store.dispatch('getStadiumData',this.pagination).then(ok=>{
                     if(ok){
                         this.stadiumList = this.stadiumListData.data;
                         this.pagination = this.stadiumListData.pagination;
                     }
                 });
                
        },
        // 跳转到其他页码回调
        goToPageNo(pageNo){
            this.pagination.currentPage = pageNo;
            this.getStadiumData();
        },
        // 关键字查找
        async search(){
            if(this.query){
                let {data:res} = await Api.searchStadium({query:this.query,pagination:this.pagination});
                if(res.status !== 200) return this.$message.warning(`没有找到相关球馆！`);
                this.$message.success(`已找到${res.data.pagination.total}个相关球馆！`)
                this.stadiumList = res.data.data;
                this.pagination = res.data.pagination;
            }else{
                this.$message.warning('请输入关键词');
            }
        },
        // 关闭对话框
        closeAddbox(){
            this.isShowAddStadium = false
            this.$refs.addStadiumFormRef.resetFields();
        },
        // 关闭对话框
        closeEditbox(){
            this.isShowEditStadium = false
            this.editStadiumForm.sName = ''
            this.editStadiumForm.sPhone = ''
            this.editStadiumForm.sAddress = ''
            this.editStadiumForm.sid = ''
        },
        // 添加球馆
        async addStadium(){
            // 验证表单
             this.$refs.addStadiumFormRef.validate(async valid=>{
                 if(!valid) return;
                 const {data:res} = await Api.addStadium(this.addStadiumForm);
                 if(res.status !== 201 ) return this.$message.error('球馆添加失败');
                 this.$message.success('球馆添加成功');
                 this.$refs.addStadiumFormRef.resetFields();
                 this.getStadiumData();
                 this.isShowAddStadium=false;
             })
        },
        // 点击编辑球馆的回调
        async editStadium(item){
            // 将选中的球馆信息赋值给editStadiumForm
            console.log(item);
            this.isShowEditStadium = true;
            this.editStadiumForm.sName = item.sname;
            this.editStadiumForm.sPhone = item.phone;
            this.editStadiumForm.sAddress = item.address;
            this.editStadiumForm.sid = item.sid;
            this.editStadiumForm.picUrl = item.picUrl;
        },
        // 保存修改的回调
        async saveEditStadium(){
            // 验证表单
             this.$refs.editStadiumFormRef.validate(async valid=>{
                 if(!valid) return;
                 const {data:res} = await Api.editStadium(this.editStadiumForm);
                 if(res.status !== 200 ) return this.$message.error('修改失败');
                 this.$message.success('修改已保存');
                 this.getStadiumData();
                 this.isShowEditStadium=false;
             })
        },
        // 删除某个球馆
        async removeStadium(id){
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                 const {data:res} = await Api.removeStadium(id);
             if(res.status !== 200 ) return this.$message.error('删除失败');
                 this.$message.success('删除成功');
                 this.getStadiumData();
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        
        },
             // 上传头像
       handleAvatarSuccess(res, file) {
         console.log('res',res.url);
  
         this.imgUrl = URL.createObjectURL(file.raw);
         this.imgUrl = res.url;
         this.addStadiumForm.picUrl = this.imgUrl;
         this.editStadiumForm.picUrl = this.imgUrl;
        
       },
       beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    
    watch:{
      query(newVal,oldVal){
        if(newVal === '' && oldVal!== ''){
            this.getStadiumData();
       }
      }
    },
    computed:{
        ...mapState({
            stadiumListData:state => state.stadium.stadiumListData,
        })
    },
    created() {
        this.getStadiumData();
    },  
    }
</script>

<style scoped lang="less">
   .searchBox{
        margin-top: 20px;
        display: flex;
        
    }
    .addUserBox{
        margin-right: 50px;
    }
    .avatarBox{
      width: 160px;
      height: 170px;
      >img{
         width: 100%;
         height: 100%;  
      }
      .avatar-uploader{
         height: 200px;
         .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
      }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 178px;
            text-align: center;
            border:1px solid #ddd
        }
         .avatar {
            width: 100%;
            height: 100%;
            display: block;
            transition: all 0.2s linear;
        }
        .avatar:hover{
            opacity: .5;
        }
     .title{
      text-align: center;
      color: #606266;
          text-align: left;
       span{
           font-weight: 600;
       
       }
      }
      border-radius: 5px;
      margin-right: 30px;
      margin-left: 50px;
      overflow: hidden;
      
  }
   .stadiumPicture{
       width: 130px;
       height: 120px;
   }
</style>